<template>
  <div class="page-miH page-bgBack p24">
    <div class="titleBox">
      <a-input-search placeholder="姓名/手机号/身份证号" style="width: 220px" @search="onSearch" :defaultValue="nameOrPhoneOrIdCard" />
      <div>
        <QrcodeForPay :needBatch="false" title="员工邀请码" :showFunc="showQrcode" />
        <a-button type="primary" @click="addEmp">新增人员</a-button>
        <a-dropdown>
          <a-menu slot="overlay" @click="handleMenuClick">
            <a-menu-item key="1"> 全部导出 </a-menu-item>
            <a-menu-item key="2"> 批量导出 </a-menu-item>
          </a-menu>
          <a-button style="margin-left: 12px"> 导出 <a-icon type="down" /> </a-button>
        </a-dropdown>
      </div>
    </div>
    <employee-select
      :show.sync="empSelectVisible"
      :default-selected-keys="selectedList"
      :selected-list.sync="selectedList"
      :status="5"
      @change="onEmployeeSelectChange"
    />
    <a-modal
      :visible="empVisible"
      title="新增人员"
      placement="right"
      class="modal-system"
      @ok="addEmpOk"
      okText="确认"
      @cancel="addEmpCancel"
    >
      <a-form-model ref="addForm" :model="form" :label-col="labelCol" :wrapper-col="wrapperCol">
        <a-form-model-item
          ref="name"
          prop="name"
          label="姓名"
          :rules="{
            required: true,
            message: '姓名必填'
          }"
        >
          <a-input v-model="form.name" placeholder="请输入名称" />
        </a-form-model-item>
        <a-form-model-item ref="phone" prop="phone" label="手机号码">
          <a-input v-model="form.phone" placeholder="请输入手机号码" />
        </a-form-model-item>
        <a-form-model-item
          ref="idCard"
          prop="idCard"
          label="身份证号"
          :rules="{
            required: true,
            message: '身份证号必填'
          }"
        >
          <a-input v-model="form.idCard" placeholder="请输入身份证号" />
        </a-form-model-item>
        <a-form-model-item
          ref="bankIdentity"
          prop="bankIdentity"
          label="银行卡号"
          :rules="{
            required: false
          }"
        >
          <a-input v-model="form.bankIdentity" placeholder="请输入银行卡号" />
        </a-form-model-item>
        <a-form-model-item
          ref="zfbIdentity"
          prop="zfbIdentity"
          label="支付宝账号"
          :rules="{
            required: false
          }"
        >
          <a-input v-model="form.zfbIdentity" placeholder="请输入支付宝账号" />
        </a-form-model-item>
      </a-form-model>
    </a-modal>
    <a-modal
      :visible="detailVisible"
      title="发薪人员详情"
      placement="right"
      class="modal-system"
      @ok="addDetailOk"
      okText="确认"
      @cancel="detailVisible = false"
      :width="750"
      :footer="null"
    >
      <div style="display: flex; align-items: center">
        <div>
          <a-avatar :size="56" :src="editForm.avatar ? editForm.avatar : ''" icon="user" />
        </div>
        <div style="margin-left: 12px">
          <div style="font-size: 16px; font-weight: 500; color: #3c3d43">
            {{ editForm.name }}
          </div>
          <a-icon type="wechat" style="color: #6bc739" /><span
            style="font-size: 12px; font-weight: 400; color: #767885; margin-left: 8px"
            >{{ editForm.isVxBinding ? "已绑定" : "未绑定" }}</span
          >
        </div>
      </div>
      <div class="textBox">
        <div>个人信息</div>
        <div v-if="!editState" @click="toEditState" class="editForm"><a-icon type="form" style="margin-right: 4px" />编辑</div>
      </div>
      <div class="itemBox">
        <div class="items">
          <div class="itemsTitle">姓名：</div>
          <div v-if="!editState" class="itemsContent">{{ editForm.name }}</div>
          <a-input v-else style="width: 200px; margin-top: 4px" v-model="editForm.name" />
        </div>
        <div class="items">
          <div class="itemsTitle">手机号码：</div>
          <div v-if="!editState" class="itemsContent">{{ editForm.phone }}</div>
          <a-input v-else style="width: 200px; margin-top: 4px" v-model="editForm.phone" />
        </div>
        <div class="items">
          <div class="itemsTitle">身份证号：</div>
          <div class="itemsContent">{{ editForm.idCard }}</div>
        </div>
        <div class="items">
          <div class="itemsTitle">银行名称：</div>
          <div class="itemsContent">{{ editForm.openingBank }}</div>
          <!-- <a-input v-else style="width:200px;margin-top:4px" v-model="editForm.openingBank" /> -->
        </div>
        <div class="items">
          <div class="itemsTitle">银行卡号：</div>
          <div v-if="!editState" class="itemsContent">{{ editForm.bankIdentity }}</div>
          <a-input v-else style="width: 200px; margin-top: 4px" v-model="editForm.bankIdentity" />
        </div>
        <div class="items">
          <div class="itemsTitle">支付宝账号：</div>
          <div v-if="!editState" class="itemsContent">{{ editForm.zfbIdentity }}</div>
          <a-input v-else style="width: 200px; margin-top: 4px" v-model="editForm.zfbIdentity" />
        </div>
      </div>
      <div class="buttonBox" v-if="editState">
        <a-button @click="editCancel">取消</a-button>
        <a-button type="primary" style="margin-left: 8px" @click="editOk">保存</a-button>
      </div>
      <div class="textBox" style="margin-top: 40px">发薪详情</div>
      <a-table
        style="margin-top: 24px"
        :columns="detailColumns"
        :pagination="pagination2"
        :data-source="detailList"
        @change="handleTableChange2"
      >
        <div slot="type" slot-scope="text">{{ text === 1 ? "支付宝" : text === 2 ? "微工卡" : text === 3 ? "银行卡" : "--" }}</div>
        <div slot="payTime" slot-scope="text">{{ moment(text).format("YYYY-MM-DD HH:mm:ss") }}</div></a-table
      >
    </a-modal>
    <div class="tableBox">
      <a-table
        :loading="loading"
        :scroll="{ x: 1500 }"
        :columns="columns"
        :data-source="dataList"
        :pagination="pagination"
        @change="handleTableChange"
      >
        <div slot="action" slot-scope="text, record" style="display: flex">
          <a-button type="link" @click="showDetail(record)">详情</a-button>
          <a-popconfirm :title="'确定删除?'" @confirm="deletePeople(record)">
            <a-icon slot="icon" type="question-circle-o" style="color: red" />
            <a-button type="link">删除</a-button>
          </a-popconfirm>
        </div>
      </a-table>
    </div>
  </div>
</template>

<script>
import { addPeople, getPeopleList, deletePeople, editPeople, getPeopleDetail } from "./api";
import QrcodeForPay from "@/components/qrcodeForPay";
import ExportMixin from "xqjr-plugin-common/UploadOrExport/exportMixin";
const mixin = new ExportMixin();
const columns = [
  {
    title: "姓名",
    dataIndex: "name",
    key: "name",
    width: 100,
    fixed: "left",
    scopedSlots: { customRender: "name" }
  },

  {
    title: "身份证号",
    dataIndex: "idCard",
    key: "idCard",
    width: 120
  },
  {
    title: "手机号",
    dataIndex: "phone",
    key: "phone",
    width: 100
  },
  {
    title: "支付宝账号",
    dataIndex: "zfbIdentity",
    key: "zfbIdentity",
    scopedSlots: { customRender: "zfbIdentity" },
    width: 140
  },
  {
    title: "微信openId",
    dataIndex: "vxIdentity",
    key: "vxIdentity",
    scopedSlots: { customRender: "vxIdentity" },
    width: 140
  },
  {
    title: "银行卡号",
    dataIndex: "bankIdentity",
    key: "bankIdentity",
    scopedSlots: { customRender: "bankIdentity" },
    width: 140
  },
  {
    title: "银行名称",
    dataIndex: "openingBank",
    key: "openingBank",
    scopedSlots: { customRender: "openingBank" },
    width: 140
  },

  {
    title: "操作",
    dataIndex: "action",
    key: "action",
    width: 140,
    scopedSlots: { customRender: "action" },
    align: "center",
    fixed: "right"
  }
];
const detailColumns = [
  {
    title: "发薪时间",
    dataIndex: "payTime",
    key: "payTime",
    width: 100,
    scopedSlots: { customRender: "payTime" }
  },

  {
    title: "所属发薪批次名称",
    dataIndex: "orderTitle",
    key: "orderTitle",
    width: 120
  },
  {
    title: "发薪方式",
    dataIndex: "type",
    key: "type",
    width: 100,
    scopedSlots: { customRender: "type" }
  },
  {
    title: "发薪金额",
    dataIndex: "money",
    key: "money",
    scopedSlots: { customRender: "money" },
    width: 120
  },

  {
    title: "单笔交易流水号",
    dataIndex: "thirdPartyInteriorDetailId",
    key: "thirdPartyInteriorDetailId",
    width: 100,
    scopedSlots: { customRender: "thirdPartyInteriorDetailId" }
  }
];
export default {
  mixins: [mixin],
  components: { QrcodeForPay, EmployeeSelect: () => import("@/components/EmployeeSelect2/employeeSelect-xinzi") },
  data() {
    return {
      columns,
      nameOrPhoneOrIdCard: "",
      detailColumns,
      detailList: [],
      loading: false,
      dataList: [],
      form: {},
      editForm: {},
      editFormCopy: {},
      editState: false,
      empVisible: false,
      detailVisible: false,
      labelCol: { span: 6 },
      selectedList: [],
      wrapperCol: { span: 14 },
      empSelectVisible: false,
      companyId: this.$store.state.hr.companyId,
      pagination: {
        pageSize: 10,
        total: 0,
        size: "default",
        current: 1,
        showTotal: (total) => `共 ${total} 条`,
        showQuickJumper: true,
        showSizeChanger: true,
        pageSizeOptions: ["10", "20", "50", "100"]
      },
      pagination2: {
        pageSize: 10,
        total: 0,
        size: "default",
        current: 1,
        showTotal: (total) => `共 ${total} 条`,
        showQuickJumper: true,
        showSizeChanger: true,
        pageSizeOptions: ["10", "20", "50", "100"]
      }
    };
  },
  created() {
    this.getPeopleList();
  },
  methods: {
    onEmployeeSelectChange() {
      if (!this.selectedList) {
        this.$message.warning("请选择人员");
      } else {
        var arr = [];
        this.selectedList.forEach((item) => {
          arr.push(item.id);
        });
        this.exportData = {
          idList: arr
        };
        this.url = `/hr/api/v1/transferAccountsPeoples/exportTransferAccountsPeopleList`;
        this.excelName = "人员库导出详情" + ".xlsx";
        this.postDownload();
        this.selectedList = [];
      }
    },
    handleMenuClick(e) {
      if (e.key === "1") {
        this.exportData = {
          nameOrPhoneOrIdCard: this.nameOrPhoneOrIdCard ? this.nameOrPhoneOrIdCard : undefined
        };
        this.url = `/hr/api/v1/transferAccountsPeoples/exportTransferAccountsPeopleList`;
        this.excelName = "人员库导出详情" + ".xlsx";
        this.postDownload();
      } else if (e.key === "2") {
        this.empSelectVisible = true;
      }
    },

    showQrcode() {
      if (this.$refs.infoCard) {
        const info = this.$refs.infoCard.getInfo();
        return info;
      }
      return false;
    },
    editCancel() {
      this.editState = false;
      this.editForm = JSON.parse(JSON.stringify(this.editFormCopy));
    },
    editOk() {
      if (!this.editForm.name) {
        this.$message.warning("姓名不能为空！");
      } else {
        editPeople({
          id: this.editForm.id,
          // bankIdentity: this.editForm.bankIdentity,
          idCard: this.editForm.idCard,
          name: this.editForm.name,
          phone: this.editForm.phone,
          zfbIdentity: this.editForm.zfbIdentity,
          bankIdentity: this.editForm.bankIdentity
          // openingBank: this.editForm.openingBank
        }).then((res) => {
          this.$notification["success"]({
            message: "success",
            description: "保存成功"
          });
          this.getPeopleList();
          this.editFormCopy = JSON.parse(JSON.stringify(this.editForm));
          this.editState = false;
        });
      }
    },
    deletePeople(e) {
      deletePeople(e.id).then((res) => {
        this.$notification["success"]({
          message: "success",
          description: "删除成功"
        });
        this.getPeopleList();
      });
    },
    toEditState() {
      this.editState = true;
    },
    addDetailOk() {},
    showDetail(record) {
      this.detailVisible = true;
      this.editForm = JSON.parse(JSON.stringify(record));
      this.editFormCopy = JSON.parse(JSON.stringify(record));
      this.editState = false;
      getPeopleDetail({
        peopleId: this.editForm.id,
        pageNo: 1,
        pageSize: 10
      }).then((res) => {
        this.pagination2.total = res.data && res.data.entityCount;
        this.detailList = res.data.entities;
      });
    },
    getPeopleList() {
      var par = {
        pageNo: this.pagination.current,
        pageSize: this.pagination.pageSize,
        nameOrPhoneOrIdCard: this.nameOrPhoneOrIdCard ? this.nameOrPhoneOrIdCard : null
      };
      getPeopleList(par).then((res) => {
        this.pagination.total = res.data && res.data.entityCount;
        this.dataList = res.data.entities;
        if (res.data.entities.length === 0 && this.pagination.current > 1) {
          // 当本页非第一页（比第一页大）时，删除最后一条后台会返回当页页码，
          // 但是本页数据为空，table组件会展示为当前页的上一页数据为空，需要加加判断再拉一下上页数据
          this.pagination.current = this.pagination.current - 1;
          this.pagination.pageSize = 10;
          this.getPeopleList();
        }
      });
    },
    addEmpOk() {
      this.$refs.addForm.validate((valid) => {
        if (valid) {
          addPeople({
            ...this.form
          }).then((res) => {
            this.$notification["success"]({
              message: "success",
              description: "新增成功"
            });
            this.empVisible = false;
            // setTimeout(() => {
            //   this.$refs.addForm.resetFields();
            // });
            this.getPeopleList();
          });
        }
      });
    },
    addEmpCancel() {
      this.empVisible = false;
    },
    addEmp() {
      this.empVisible = true;
      this.$nextTick(() => {
        this.$refs.addForm.clearValidate();
      });

      this.form = {};
    },
    onSearch(e) {
      this.nameOrPhoneOrIdCard = e;
      this.pagination.current = 1;
      this.pagination.pageSize = 10;
      this.getPeopleList();
    },
    editItem() {},
    deleteItem() {},
    handleTableChange(pagination, filters, sorter) {
      this.pagination.current = pagination.current;
      this.pagination.pageSize = pagination.pageSize;
      this.getPeopleList();
    },
    handleTableChange2(pagination, filters, sorter) {
      this.pagination2.current = pagination.current;
      this.pagination2.pageSize = pagination.pageSize;
      getPeopleDetail({
        peopleId: this.editForm.id,
        pageNo: this.pagination2.current,
        pageSize: this.pagination2.pageSize
      }).then((res) => {
        this.pagination2.total = res.data && res.data.entityCount;
        this.detailList = res.data.entities;
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.titleBox {
  display: flex;
  justify-content: space-between;
}
.tableBox {
  margin-top: 24px;
}
.textBox {
  height: 16px;
  line-height: 16px;
  font-size: 16px;
  font-weight: 500;
  color: #3c3d43;
  border-left: 4px solid var(--primary);
  padding-left: 8px;
  margin-top: 24px;
  display: flex;
  justify-content: space-between;
  .editForm {
    font-size: 12px;
    color: var(--primary);
    cursor: pointer;
  }
}
.buttonBox {
  display: flex;
  justify-content: center;
  margin-top: 32px;
}
.itemBox {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  .items {
    width: 33%;
    margin-top: 24px;
    .itemsTitle {
      font-size: 14px;
      font-weight: 400;
      color: #a6a8b4;
    }
    .itemsContent {
      font-size: 14px;
      font-weight: 400;
      color: #55565d;
      margin-top: 4px;
    }
  }
}
</style>
